<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ 'config.restore.title' | translate }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
      [disabled]="clicked || deleting"
    ></button>
  </div>
  <div class="modal-body">
    <div class="text-center mb-3">
      <i class="fas fa-history primary-text" style="font-size: 75px"></i>
    </div>
    <ul class="mb-3">
      <li>{{ 'config.restore.help_1' | translate }}</li>
      <li>{{ 'config.restore.help_2' | translate }}</li>
    </ul>
    <ul class="list-group list-group-box mb-0">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <div>
          <span>{{ 'form.button_download' | translate }}</span>
          <br />
          <small class="grey-text">{{ 'config.restore.download' | translate }}</small>
        </div>
        <button
          class="btn btn-primary m-0 ms-3 py-1"
          (click)="downloadCurrentConfig()"
          [disabled]="clicked || deleting"
          [attr.aria-label]="'backup.backup_now' | translate"
        >
          <i class="fas fa-arrow-right"></i>
        </button>
      </li>
    </ul>
    @if (loading) {
    <div class="text-center primary-text">
      <i class="fa fa-cog fa-spin mt-3" style="font-size: 75px"></i>
    </div>
    } @else if (backupList.length) {
    <ul class="list-group list-group-box mt-3">
      @for (backup of backupList; track backup) {
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>
          {{ backup.timestamp | date:'mediumDate' }}<br />
          <span class="grey-text small">{{ backup.timestamp | date:'shortTime' }}</span>
        </span>
        <span style="display: flex; flex-wrap: nowrap">
          <button
            (click)="restore(backup.id)"
            [disabled]="clicked || deleting"
            class="btn btn-primary m-0 ms-3 py-1"
            [ngbTooltip]="'config.restore.copy_to_editor' | translate"
            placement="bottom"
            container="modal"
            [openDelay]="150"
            triggers="hover"
            [attr.aria-label]="'config.restore.copy_to_editor' | translate"
          >
            <i class="fas fa-history"></i>
          </button>
          <button
            class="btn btn-primary m-0 ms-2"
            (click)="download(backup.id)"
            [disabled]="clicked || deleting"
            [ngbTooltip]="'form.button_download' | translate"
            placement="bottom"
            container="modal"
            [openDelay]="150"
            triggers="hover"
            [attr.aria-label]="'form.button_download' | translate"
          >
            <i class="fas fa-download"></i>
          </button>
          <button
            class="btn btn-danger m-0 ms-2"
            (click)="delete(backup.id)"
            [disabled]="clicked || deleting"
            [ngbTooltip]="'form.button_delete' | translate"
            placement="bottom"
            container="modal"
            [openDelay]="150"
            triggers="hover"
            [attr.aria-label]="'form.button_delete' | translate"
          >
            <i
              class="fas"
              [ngClass]="{ 'fa-trash': backup.id !== deleting, 'fa-cog fa-spin': backup.id === deleting }"
            ></i>
          </button>
        </span>
      </li>
      }
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>
          {{ 'form.button_delete_all' | translate }}<br />
          <span class="grey-text small">{{ 'common.labels.no_confirmation' | translate }}</span>
        </span>
        <span style="display: flex; flex-wrap: nowrap">
          <button
            class="btn btn-danger m-0 ms-2"
            (click)="deleteAllBackups()"
            [disabled]="clicked || deleting"
            [ngbTooltip]="'form.button_delete_all' | translate"
            placement="bottom"
            container="modal"
            [openDelay]="150"
            triggers="hover"
            [attr.aria-label]="'form.button_delete' | translate"
          >
            <i class="fas" [ngClass]="{ 'fa-trash': 'all' !== deleting, 'fa-cog fa-spin': 'all' === deleting }"></i>
          </button>
        </span>
      </li>
    </ul>
    }
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start"></div>
    <div class="text-center">
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [disabled]="clicked || deleting"
        [attr.aria-label]="'form.button_close' | translate"
      >
        {{ 'form.button_close' | translate }}
      </button>
    </div>
    <div class="text-end"></div>
  </div>
</div>
